<template>
    <div class="box-column container-grid">
        <ux-header-search ref="searchHeader" v-bind="enquiryData" :btnsData="{ permissionsData }"
            @search="onQueryClick"></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid v-bind="tableConfig" :data="dataStore.data" :columns="table.columns">
                <template v-slot:operate="{ row }">
                    <ux-btn-group :btns="table.btns" :data="{ row, permissionsData }"></ux-btn-group>
                </template>
                <template v-slot:facethumb="{ row }">
                    <el-image style="width: 70px; height: 40px" :src="row.face_thumb" fit="contain"
                        v-if="row.face_thumb !== ''" :preview-src-list="[row.face_thumb]" ></el-image>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page" :page-size="dataStore.proxy.pageSize" :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total" :layout="'total, sizes, prev, pager, next, jumper'"></el-pagination>
        </div>
        <dialogForm ref="dialogForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></dialogForm>
    </div>
</template>

<script  lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, State, Getter } from "vuex-class";
import { mixinTableStore } from "@/mixin/table/Store";
import { mixinTableHeader } from "@/mixin/table/Header";
import { mixinTableOperation } from "@/mixin/table/Operation";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import { mixinAccess } from "@/mixin/Access";
import dialogForm from "./Audit.vue";
@Component({
    mixins: [
        mixinTableStore,
        mixinTableHeader,
        mixinTableOperation,
        mixinDialogFormParent,
        mixinAccess
    ],
    components: {
        dialogForm
    }
})
export default class parkTenantAuditTable extends Vue {
    @Action("parkTenantaudit/list") getList: any;

    table: any = {
        btns: [
            {
                label: "审核",
                condition: ["permissionsData.audit", function ({ row }) {
                    return row.status == "1"
                }],
                handleClick: (this as any).onEditClick
            }
        ],
        // 列配置
        columns: [
            {
                width: 70,
                type: "seq",
                title: "序号"
            },
            {
                width: 120,
                title: "姓名",
                field: "member_xm"
            },
            {
                width: 80,
                title: '人脸',
                slots: { default: 'facethumb' },
                field: 'face_thumb'
            },
            {
                title: "性别",
                field: "member_xb",
                params: "sexData",
                formatter: (this as any).formatterData
            },
            {
                title: "手机号",
                field: "phone"
            },
            {
                title: "身份证号",
                field: "id_num"
            },
            {
                title: "审核状态",
                field: "status",
                params: "statusData",
                formatter: (this as any).formatterData
            },
            {
                title: "审核时间",
                field: "audit_at"
            },
            {
                title: "审核备注",
                field: "remark"
            },
            {
                slots: { default: "operate" },
                title: "操作",
                field: "operate",
                width: 120
            }
        ]
    };
    statusData: any = [
        { value: "1", label: "待审核" },
        { value: "2", label: "通过审核" },
        { value: "3", label: "审核不通过" }
    ];
    // 查询头下拉数据配置
    headerSelectList: any = [
        {
            dataName: "statusData",
            keyName: "status"
        }
    ];
    // 查询头配置
    enquiryData: any = {
        searchBtn: {
            condition: ["permissionsData.query"]
        },
        fields: [
            {
                fieldType: "select",
                field: "status",
                label: "审核状态"
            },
            {
                field: "member_xm",
                label: "姓名"
            }
        ]
    };
    @State((state) => state.sharing.sex) sexData: any;
}
</script>
